<template>
  <view class="wrap">
    <u-collapse :head-style="headStyle">
      <u-collapse-item
        :title="'用户   ' + item.name"
        v-for="(item, index) in list"
        :key="index"
      >
        <u-cell-item title="教练ID" :value="item.id"></u-cell-item>
        <u-cell-item title="教练姓名" :value="item.name"></u-cell-item>
        <u-cell-item title="年龄" :value="item.age"></u-cell-item>
        <u-cell-item
          title="性别"
          :value="item.gender | genderFilter"
        ></u-cell-item>
        <u-cell-item title="生日" :value="item.birthday"></u-cell-item>
        <view>
          <view class="btn">
            <u-button
              type="warning"
              shape="circle"
              plain
              @click="showUpdateCoachInfo(item)"
              >修改</u-button
            >
          </view>
          <view class="btn">
            <u-button
              type="error"
              shape="circle"
              plain
              @click="showDeleteCoachInfo(item.id)"
              >删除</u-button
            >
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>
    <!-- 修改教练信息 -->
    <u-popup
      v-model="updateCoachInfoShow"
      mode="bottom"
      border-radius="10"
      height="1100"
      closeable
    >
      <view class="updateForm">
        <u-form
          :model="updateCoachInfoForm"
          ref="updateCoachInfoFormRef"
          :error-type="['message']"
        >
          <u-form-item label="姓名" prop="name" label-width="150rpx">
            <u-input v-model="updateCoachInfoForm.name"></u-input>
          </u-form-item>
          <u-form-item label="年龄" prop="age" label-width="150rpx">
            <u-input type="number" v-model="updateCoachInfoForm.age"></u-input>
          </u-form-item>
          <u-form-item label="性别" label-width="150rpx">
            <u-select
              v-model="showGender"
              :list="genderList"
              @confirm="selectGender"
            ></u-select>
            <view
              @click="showGender = true"
              style="
                height: 70rpx;
                width: 150rpx;
                text-align: center;
                border-bottom: 2rpx solid #82848a;
              "
              >{{ updateCoachInfoForm.gender | genderFilter }}</view
            >
          </u-form-item>
          <u-form-item label="生日" label-width="150rpx">
            <u-calendar
              v-model="showBirthday"
              @change="selectBirthday"
            ></u-calendar>
            <view
              @click="showBirthday = true"
              style="height: 70rpx; border-bottom: 2rpx solid #82848a"
              >{{ updateCoachInfoForm.birthday }}</view
            >
          </u-form-item>
          <u-button
            type="primary"
            shape="circle"
            :ripple="true"
            @click="updateCoachInfo"
            >提交</u-button
          >
        </u-form>
      </view>
    </u-popup>
    <!-- 显示是否删除对话框 -->
    <u-popup v-model="deleteCoachInfoShow" mode="top">
      <view>
        <text>是否删除？</text>
        <view class="btn">
          <u-button type="primary" plain @click="deleteCoachInfo">是</u-button>
        </view>
        <view class="btn">
          <u-button type="error" plain @click="deleteCoachInfoShow = false"
            >否</u-button
          >
        </view>
      </view>
    </u-popup>
    <!-- 加载更多 -->
    <u-loadmore :status="status" @loadmore="load" />
    <!-- 显示toast提示 -->
    <u-toast ref="coachInfoToastRef" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      headStyle: {
        fontWeight: "800",
        fontSize: "30rpx",
        height: "100rpx",
      },
      // 控制性别选择器
      showGender: false,
      // 控制选择器的内容
      genderList: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      // 控制生日选择器
      showBirthday: false,
      // 控制修改球员信息显示与隐藏
      updateCoachInfoShow: false,
      // 控制删除球员信息显示与隐藏
      deleteCoachInfoShow: false,
      // 修改球员信息表单
      updateCoachInfoForm: {
        id: "",
        name: "",
        age: 0,
        gender: "",
        birthday: "",
      },
      updateCoachInfoFormRules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "change" },
          {
            min: 2,
            max: 4,
            message: "姓名必须为2-4字之间",
            trigger: "blur",
          },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "change" }],
      },
      // 教练信息ID
      coachId: -1,
      // 总条数
      total: -1,
      // 分页查询
      // 当前页码
      currentPage: 1,
      // 每页存放的数据
      size: 1,
      // 加载状态
      status: "loadmore",
    };
  },
  methods: {
    // 获取所有教练信息
    async getAllPlayerInfo(currentPage, size) {
      const { data } = await this.$request({
        url: "/coachinfo/",
        data: {
          currentPage,
          size,
        },
      });
      // 获取总条数
      this.total = data.total;
      if (this.total === 0) {
        this.status = "nomore";
      }
      // 获取数组长度
      let len = this.list.length;
      if (len < this.total) {
        data.data.forEach((item) => {
          this.list.push(item);
        });
        if (this.list.length === this.total) {
          this.status = "nomore";
        }
      }
    },

    // 获取选择的性别
    selectGender(e) {
      this.updateCoachInfoForm.gender = e[0].value;
    },

    // 获取选择的生日
    selectBirthday(e) {
      this.updateCoachInfoForm.birthday = e.result;
    },

    // 显示修改教练信息
    showUpdateCoachInfo(item) {
      this.updateCoachInfoShow = true;
      this.updateCoachInfoForm = item;
    },

    async updateCoachInfo() {
      const { data } = await this.$request({
        url: "/coachinfo/",
        method: "put",
        data: this.updateCoachInfoForm,
      });
      if (data.code === 200) {
        this.updateCoachInfoShow = false;
        return this.$refs.coachInfoToastRef.show({
          title: data.message,
          type: "success",
        });
      } else {
        return this.$refs.coachInfoToastRef.show({
          title: data.message,
          type: "error",
        });
      }
    },

    // 显示删除教练信息
    showDeleteCoachInfo(id) {
      this.deleteCoachInfoShow = true;
      this.coachId = id;
    },

    async deleteCoachInfo() {
      let id = this.coachId;
      const { data } = await this.$request({
        url: `/coachinfo/${id}`,
        method: "delete",
      });
      if (data.code === 200) {
        this.deleteCoachInfoShow = false;
        return uni.redirectTo({
          url: "/pages/coachInfo/index",
        });
      } else {
        return this.$refs.coachInfoToastRef.show({
          title: data.message,
          type: "error",
        });
      }
    },

    // 点击加载更多数据
    load() {
      if (this.currentPage >= this.total) return;
      this.status = "loading";
      this.currentPage = ++this.currentPage;
      setTimeout(() => {
        this.getAllPlayerInfo(this.currentPage, this.size);
        if (this.currentPage >= this.total) this.status = "nomore";
        else this.status = "loadmore";
      }, 2000);
    },
  },

  onLoad() {
    this.getAllPlayerInfo(this.currentPage, this.size);
  },

  onReady() {
    this.$refs.updateCoachInfoFormRef.setRules(this.updateCoachInfoFormRules);
  },
};
</script>

<style scoped lang="scss">
.wrap {
  padding: 15rpx 30rpx;

  .btn {
    width: 50%;
    margin-top: 15rpx;
    margin-left: auto;
    margin-right: auto;
  }

  .updateForm {
    overflow: auto;
    height: 600rpx;
    padding: 35rpx 50rpx;
  }

  u-popup {
    view {
      padding: 10rpx 30rpx;

      text {
        font-weight: 800;
        font-size: 35rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}


</style>